<template>
    <div class="container">
        <div :class="['side', iscollapse ? 'collapse' : 'expand']">
            <!-- 系统logo -->
            <div class="logo">
                <img src="../assets/image/logo.webp" alt="" @click="toHome">
                <span v-if="!iscollapse">管理员</span>
            </div>
            <!-- 导航菜单 -->
            <el-scrollbar style="height: calc(100vh - 60px);">
            <el-menu
                  default-active="2"
                  class="el-menu-vertical"
                  background-color="#001529"
                  text-color="#fff"
                  :collapse="iscollapse"
                  router
                >
                  <el-sub-menu index="1" >
                    <template #title>
                        <!-- <el-icon><location /></el-icon> -->
                     <el-icon color="#fff"><Grid /></el-icon>
                      <span>系统管理</span>
                    </template>
                    <el-menu-item-group>
                         <el-menu-item v-for="item in menuData" :key="item.path" :index="item.path">{{ item.title }}</el-menu-item>
                      <!-- <el-menu-item index="1-1">用户管理</el-menu-item> -->
                      <!-- <el-menu-item index="1-2">角色管理</el-menu-item>
                      <el-menu-item index="1-3">权限管理</el-menu-item> -->
                      <!-- <el-menu-item index="1-4">部门管理</el-menu-item> -->
                    </el-menu-item-group>
                  </el-sub-menu>
                  <el-sub-menu index="2" >
                    <template #title>
                        <el-icon><Promotion /></el-icon>
                      <span>材料管理</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="/cailiao">辅料管理</el-menu-item>
                      <el-menu-item index="/yuancai">原材料管理</el-menu-item>
                      <!-- <el-menu-item index="2-1">木工材料</el-menu-item> -->
                    </el-menu-item-group>
                  </el-sub-menu>
                  <el-sub-menu index="3" >
                    <template #title>
                        <el-icon><Promotion /></el-icon>
                      <span>真皮管理</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="/zhenpi">材料列表</el-menu-item>
                      <el-menu-item index="/zhenpiOrder">生产订单列表</el-menu-item>
                      <!-- <el-menu-item index="/zhenpi">绗缝出入库记录</el-menu-item>
                      <el-menu-item index="/zhenpi">刺绣出入库记录</el-menu-item>
                      <el-menu-item index="/zhenpi">验收出入库记录</el-menu-item> -->
                      <!-- <el-menu-item index="/zhenpi">生产统计</el-menu-item> -->

                      <!-- <el-menu-item index="/yuancai">原材料管理</el-menu-item> -->
                      <!-- <el-menu-item index="2-1">木工材料</el-menu-item> -->
                    </el-menu-item-group>
                  </el-sub-menu>
            </el-menu> 
            </el-scrollbar>

        </div>
        <div :class="['content-right', iscollapse ? 'collapse-R' : 'expand-R']">
            <div class="nav-top">
                <div class="menu" @click="toggle">
                    <el-icon><Fold /></el-icon>
                    <span>菜单</span>
                </div>
                <div class="user_info">
                    <el-badge is-dot class="notify"><el-icon><Bell /></el-icon></el-badge>
                    <el-dropdown>
                      <span class="el-dropdown-link" >
                        {{user.name}}
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>邮箱:{{ user.email }}</el-dropdown-item>
                          <el-dropdown-item>退出</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="wrapper">
                <div class="main-page">
                   <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {Promotion,Grid,Fold,Bell} from '@element-plus/icons-vue'
import {ref} from "vue"
import { useRouter } from 'vue-router';
const router = useRouter()

const menuData = [
    {title:"用户管理",path:'/xitong/userManage'},
    // {title:"角色管理",path:'/roleManage'},
    // {title:"权限管理",path:'/permission'},
    {title:"菜单管理",path:'/xitong/caidan'},
]

// 回到主页
const toHome =()=>{
    router.push("/")
}

const user = ref({
    name:"老李",
    email:"1003349@qq.com"
})
const iscollapse = ref(false)
const toggle = ()=>{
    iscollapse.value = !iscollapse.value
}


</script>

<style lang="scss" scoped>
.container{
    position: relative;

    .side{
        position: fixed;
        width: 200px;
        height: 100%;
        color: #fff;
        background-color: #001529;
        transition: width .3s;
        .logo{
            margin-top: 10px;
            display: flex;
            overflow: hidden;
            img{
                width: 60px;
                height: 60px;
                vertical-align: middle;
                &:hover{
                    cursor: pointer;
                }
            }
            span{
                height: 60px;
                font-size: 18px;
                padding-left: 20px;
                line-height: 60px;
            }
        }
        .el-menu-vertical{
            height: calc(100vh - 60px);
            // height: 500px;
            transition: width .2s;
        }
    }
    .expand{
        width: 200px;
    }
    .collapse{
        width: 80px;
    }
    .el-menu{
        border-right: none;
    }
    .content-right{
        margin-left: 200px;
                // transition: margin .5s;
        .nav-top{
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px ;
            .menu{
                display: flex;
                align-items: center;
                span{
                    padding-left: 10px;
                    font-size: 16px;
                }
            }
            .user_info{
                display: flex;
                align-items: center;
                margin-right: 20px;
                span{
                    padding-left: 10px;
                    font-size: 16px;
                }
                .notify{
                    line-height: 16px;
                }
                .el-dropdown-link {
                  cursor: pointer;
                  color: var(--el-color-primary);
                  display: flex;
                  align-items: center;
                  color:#666
                }
                .el-dropdown-link:focus {
                    outline: none;
                }
            }
        }
        .wrapper{
            background-color: #eef0f3;
            height: calc(100vh - 50px);
            padding: 15px;
            box-sizing: border-box;
        }
        .main-page{
            // background-color: #fff;
            box-sizing: border-box;
            height: 100%;
            // padding: 20px;
        }
    }
    .expand-R{
        margin-left: 200px;
    }
    .collapse-R{
        margin-left: 80px;
    }
}


</style>